<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">总览</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片模版 -->
        <el-card class="box-card">
            <h4>实时运单</h4>
            <div class="waiceng1">
                <div class="neice1"></div>
                <div class="neice2">正常</div>
            </div>
            <div class="waiceng2">
                <div class="neice1"></div>
                <div class="neice2">报警</div>
            </div>
            <div class="waiceng3">
                <div class="neice1"></div>
                <div class="neice2">失去连接</div>
            </div>
        </el-card>
        <br />
        <div>
            <div class="GaoDeDiTu">
                <el-card>
                    <div>
                        <baidu-map :center="center" class="baidumap" :zoom="zoom" @ready="handler" @click="getClickInfo" :scroll-wheel-zoom='true'>
                        </baidu-map>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            BaoJingInfo: [],
            activeName: '当天',
            // 百度地图
            center: { lng: 109.45744048529967, lat: 36.49771311230842 },
            zoom: 13,
        }
    },
    mounted() {
    },
    methods: {
        handler({ BMap, map }) {
            var point = new BMap.Point(113.625368, 34.746599)
            var point2 = new BMap.Point(113.926800, 35.303004)
            map.centerAndZoom(point, 7)
            map.centerAndZoom(point2, 7)
            var marker = new BMap.Marker(point) // 创建标注
            var marker2 = new BMap.Marker(point2) // 创建标注
            var polyline = new BMap.Polyline([
                new BMap.Point(113.625368, 34.746599),
                new BMap.Point(113.926800, 35.303004),
            ],
                { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 1 }
            ) // 创建连线
            map.addOverlay(marker) // 将标注添加到地图中
            map.addOverlay(marker2) // 将标注添加到地图中
            map.addOverlay(polyline) // 将标注添加到地图中
            var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
            map.addOverlay(circle)
        },
        getClickInfo(e) {
            console.log(e.point.lng)
            console.log(e.point.lat)
            this.center.lng = e.point.lng
            this.center.lat = e.point.lat
        },
    }
}
</script>

<style lang="scss" scoped>
.baidumap {
    height: 500px;
    width: 1200px;
}
.GaoDeDiTu {
    width: 1250px;
}
.el-card {
    height: 550px;
}
.box-card {
		width: 1660px;
		height: 150px;
}
.waiceng1 {
    float: left;
    margin: 10px 0 30px 0;
    > .neice1 {
        width: 20px;
        height: 20px;
        background-color: blue;
        border-radius: 100%;
        margin-right: 80px;
    }
    > .neice2 {
        margin-top: -20px;
        margin-left: 30px;
    }
}
.waiceng2 {
    float: left;
    margin: 10px 0 30px 0;
    > .neice1 {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 100%;
        margin-right: 80px;
    }
    > .neice2 {
        margin-top: -20px;
        margin-left: 30px;
    }
}
.waiceng3 {
    float: left;
    margin: 10px 0 30px 0;
    > .neice1 {
        width: 20px;
        height: 20px;
        background-color: #979797;
        border-radius: 100%;
    }
    > .neice2 {
        margin-top: -20px;
        margin-left: 30px;
    }
}
</style>